<script setup lang="ts">
import { computed } from 'vue'
import type { DoctorVO } from '@/apis/doctor/doctorAPI'

interface Props {
  doctor: DoctorVO
}

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits<{
  (e: 'view-detail', id: number): void
  (e: 'make-appointment', id: number): void
}>()

// 处理查看详情
const handleViewDetail = () => {
  emit('view-detail', props.doctor.id)
}

// 处理预约
const handleMakeAppointment = () => {
  emit('make-appointment', props.doctor.id)
}

// 计算默认头像
const avatarUrl = computed(() => {
  return props.doctor.avatar
    ? props.doctor.avatar
    : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})
</script>

<template>
  <el-card shadow="hover" class="doctor-card" style="cursor: pointer;">
    <div class="doctor-avatar">
      <el-avatar :size="64" :src="avatarUrl" />
    </div>
    <div class="doctor-info">
      <h4>{{ doctor.name }}</h4>
      <p>{{ doctor.title }} | {{ doctor.department }}</p>
      <p v-if="doctor.goodAt">擅长：{{ doctor.goodAt }}</p>
      <p v-if="doctor.age">{{ doctor.age }}岁 <span v-if="doctor.gender">| {{ doctor.gender }}</span></p>
      <p v-if="doctor.rating" class="rating">
        <el-rate v-model="doctor.rating" disabled text-color="#ff9900" />
      </p>
    </div>
    <div class="doctor-actions">
      <el-button size="small" @click="handleViewDetail">详情</el-button>
      <el-button size="small" type="primary" @click="handleMakeAppointment">立即预约</el-button>
    </div>
  </el-card>
</template>

<style scoped>
.doctor-card {
  width: 100%;
  transition: transform 0.3s;
}

.doctor-card:hover {
  transform: translateY(-5px);
}

.doctor-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.doctor-info {
  text-align: center;
}

.doctor-info h4 {
  margin: 10px 0 5px;
  font-size: 16px;
  font-weight: bold;
}

.doctor-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doctor-info .rating {
  margin-top: 8px;
}

.doctor-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
</style>
